'use client'

import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Button } from "@/components/ui/button"
import { Progress } from "@/components/ui/progress"
import { 
  Radar, 
  RadarChart, 
  PolarGrid, 
  PolarAngleAxis, 
  PolarRadiusAxis, 
  ResponsiveContainer,
  Cell,
  BarChart,
  Bar,
  XAxis,
  YAxis,
  CartesianGrid,
  Tooltip,
  Legend
} from "recharts"
import { 
  TrendingUp, 
  Star, 
  Award, 
  Target,
  Sparkles,
  Crown,
  Zap,
  Heart,
  Rocket
} from "lucide-react"

interface GrowthData {
  subject: string
  score: number
  fullMark: number
  emoji: string
  color: string
}

interface GrowthChartProps {
  data?: GrowthData[]
  title?: string
  recommendation?: string
}

const defaultData: GrowthData[] = [
  {
    subject: '数理逻辑',
    score: 88,
    fullMark: 100,
    emoji: "🧮",
    color: "#8B5CF6"
  },
  {
    subject: '语言表达',
    score: 75,
    fullMark: 100,
    emoji: "💬",
    color: "#F59E0B"
  },
  {
    subject: '创新思维',
    score: 82,
    fullMark: 100,
    emoji: "💡",
    color: "#10B981"
  },
  {
    subject: '团队协作',
    score: 90,
    fullMark: 100,
    emoji: "🤝",
    color: "#3B82F6"
  },
  {
    subject: '领导能力',
    score: 65,
    fullMark: 100,
    emoji: "👑",
    color: "#EF4444"
  },
  {
    subject: '学习能力',
    score: 85,
    fullMark: 100,
    emoji: "📚",
    color: "#EC4899"
  },
]

const radarData = [
  {
    subject: "数学逻辑",
    score: 85,
    fullMark: 100,
    emoji: "🧮",
    color: "#8B5CF6"
  },
  {
    subject: "语言表达", 
    score: 78,
    fullMark: 100,
    emoji: "💬",
    color: "#F59E0B"
  },
  {
    subject: "创新思维",
    score: 92,
    fullMark: 100,
    emoji: "💡",
    color: "#10B981"
  },
  {
    subject: "团队协作",
    score: 88,
    fullMark: 100,
    emoji: "🤝",
    color: "#3B82F6"
  },
  {
    subject: "领导能力",
    score: 75,
    fullMark: 100,
    emoji: "👑",
    color: "#EF4444"
  },
  {
    subject: "学习能力",
    score: 95,
    fullMark: 100,
    emoji: "📚",
    color: "#EC4899"
  }
]

const growthData = [
  { month: "9月", score: 65, emoji: "🌱" },
  { month: "10月", score: 72, emoji: "🌿" },
  { month: "11月", score: 78, emoji: "🍃" },
  { month: "12月", score: 85, emoji: "🌳" },
  { month: "1月", score: 88, emoji: "🌲" }
]

const strengthsData = [
  {
    name: "创新思维",
    score: 92,
    level: "优秀",
    description: "具有出色的创新能力和想象力",
    emoji: "💡",
    color: "bg-vibrant-green",
    textColor: "text-vibrant-green"
  },
  {
    name: "学习能力", 
    score: 95,
    level: "卓越",
    description: "学习新知识的速度和效率极高",
    emoji: "📚",
    color: "bg-vibrant-purple",
    textColor: "text-vibrant-purple"
  },
  {
    name: "团队协作",
    score: 88,
    level: "良好",
    description: "善于与他人合作，具备良好的沟通技巧",
    emoji: "🤝",
    color: "bg-vibrant-blue",
    textColor: "text-vibrant-blue"
  }
]

const recommendations = [
  {
    title: "🎯 加强数学建模训练",
    description: "建议参加数学建模竞赛，提升逻辑思维能力",
    priority: "高",
    color: "bg-vibrant-red/10 text-vibrant-red border-vibrant-red/20"
  },
  {
    title: "🗣️ 提升演讲表达技巧", 
    description: "可以参加演讲社团或辩论队，锻炼口语表达",
    priority: "中",
    color: "bg-vibrant-orange/10 text-vibrant-orange border-vibrant-orange/20"
  },
  {
    title: "👑 培养领导力素质",
    description: "建议担任学生干部或组织社团活动",
    priority: "中",
    color: "bg-vibrant-yellow/10 text-vibrant-yellow border-vibrant-yellow/20"
  }
]

export function GrowthChart({ 
  data = defaultData, 
  title = "个人能力雷达图",
  recommendation = "数字经济"
}: GrowthChartProps) {
  const averageScore = Math.round(
    data.reduce((sum, item) => sum + item.score, 0) / data.length
  )

  const getScoreColor = (score: number) => {
    if (score >= 85) return 'text-green-600'
    if (score >= 70) return 'text-blue-600'
    if (score >= 60) return 'text-yellow-600'
    return 'text-red-600'
  }

  const getScoreBadge = (score: number) => {
    if (score >= 85) return { variant: 'default' as const, text: '优秀' }
    if (score >= 70) return { variant: 'secondary' as const, text: '良好' }
    if (score >= 60) return { variant: 'outline' as const, text: '一般' }
    return { variant: 'destructive' as const, text: '待提升' }
  }

  const totalGrowth = growthData[growthData.length - 1].score - growthData[0].score

  return (
    <div className="space-y-8">
      {/* 标题区域 */}
      <div className="text-center space-y-4">
        <div className="flex items-center justify-center gap-3">
          <div className="p-3 bg-gradient-rainbow rounded-full animate-pulse-slow">
            <Star className="w-6 h-6 text-white" />
          </div>
          <h2 className="text-h3 font-bold bg-gradient-to-r from-vibrant-purple to-vibrant-pink bg-clip-text text-transparent">
            🌟 我的成长星途
          </h2>
        </div>
        <p className="text-gray-600 max-w-2xl mx-auto">
          ✨ 基于多维度能力评估，为你绘制专属的成长轨迹和发展建议
        </p>
      </div>

      {/* 核心数据展示 */}
      <div className="grid grid-cols-2 md:grid-cols-4 gap-4 mb-8">
        <Card className="border-0 shadow-soft bg-gradient-to-br from-vibrant-blue/10 to-vibrant-blue/5 hover-lift">
          <CardContent className="p-6 text-center">
            <div className="text-3xl mb-2 animate-bounce-soft">⭐</div>
            <div className="text-2xl font-bold text-vibrant-blue mb-1">{averageScore}</div>
            <p className="text-sm text-gray-600">综合评分</p>
          </CardContent>
        </Card>
        
        <Card className="border-0 shadow-soft bg-gradient-to-br from-vibrant-green/10 to-vibrant-green/5 hover-lift">
          <CardContent className="p-6 text-center">
            <div className="text-3xl mb-2 animate-bounce-soft">📈</div>
            <div className="text-2xl font-bold text-vibrant-green mb-1">+{totalGrowth}</div>
            <p className="text-sm text-gray-600">本学期提升</p>
          </CardContent>
        </Card>
        
        <Card className="border-0 shadow-soft bg-gradient-to-br from-vibrant-purple/10 to-vibrant-purple/5 hover-lift">
          <CardContent className="p-6 text-center">
            <div className="text-3xl mb-2 animate-bounce-soft">🏆</div>
            <div className="text-2xl font-bold text-vibrant-purple mb-1">前15%</div>
            <p className="text-sm text-gray-600">年级排名</p>
          </CardContent>
        </Card>
        
        <Card className="border-0 shadow-soft bg-gradient-to-br from-vibrant-orange/10 to-vibrant-orange/5 hover-lift">
          <CardContent className="p-6 text-center">
            <div className="text-3xl mb-2 animate-bounce-soft">🎯</div>
            <div className="text-2xl font-bold text-vibrant-orange mb-1">85%</div>
            <p className="text-sm text-gray-600">目标达成率</p>
          </CardContent>
        </Card>
      </div>

      {/* 雷达图 */}
      <Card className="border-0 shadow-medium bg-gradient-to-br from-white to-gray-50/50">
        <CardHeader className="text-center pb-4">
          <CardTitle className="flex items-center justify-center gap-2 text-xl">
            <div className="p-2 bg-gradient-sunset rounded-lg">
              <Target className="w-5 h-5 text-white" />
            </div>
            🎯 六维能力雷达图
          </CardTitle>
          <CardDescription>
            全面展示你在各个维度的能力表现
          </CardDescription>
        </CardHeader>
        <CardContent>
          <div className="h-80 w-full">
            <ResponsiveContainer width="100%" height="100%">
              <RadarChart data={radarData}>
                <PolarGrid 
                  stroke="#e5e7eb" 
                  strokeWidth={1}
                  gridType="polygon"
                />
                <PolarAngleAxis 
                  dataKey="subject" 
                  tick={{ fontSize: 12, fill: '#6b7280' }}
                  className="text-sm font-medium"
                />
                <PolarRadiusAxis 
                  angle={90} 
                  domain={[0, 100]} 
                  tick={{ fontSize: 10, fill: '#9ca3af' }}
                  tickCount={5}
                />
                <Radar
                  name="能力值"
                  dataKey="score"
                  stroke="url(#radarGradient)"
                  fill="url(#radarFill)"
                  strokeWidth={3}
                  dot={{ fill: '#8B5CF6', strokeWidth: 2, r: 4 }}
                />
                <defs>
                  <linearGradient id="radarGradient" x1="0%" y1="0%" x2="100%" y2="100%">
                    <stop offset="0%" stopColor="#8B5CF6" />
                    <stop offset="50%" stopColor="#EC4899" />
                    <stop offset="100%" stopColor="#F59E0B" />
                  </linearGradient>
                  <linearGradient id="radarFill" x1="0%" y1="0%" x2="100%" y2="100%">
                    <stop offset="0%" stopColor="#8B5CF6" stopOpacity={0.1} />
                    <stop offset="50%" stopColor="#EC4899" stopOpacity={0.1} />
                    <stop offset="100%" stopColor="#F59E0B" stopOpacity={0.1} />
                  </linearGradient>
                </defs>
              </RadarChart>
            </ResponsiveContainer>
          </div>
          
          {/* 能力详情 */}
          <div className="grid grid-cols-2 md:grid-cols-3 gap-4 mt-6">
            {radarData.map((item, index) => (
              <div key={index} className="flex items-center gap-3 p-3 rounded-lg bg-gray-50/50 hover:bg-gray-100/50 transition-colors">
                <div className="text-lg">{item.emoji}</div>
                <div className="flex-1 min-w-0">
                  <div className="font-medium text-sm text-gray-900">{item.subject}</div>
                  <div className="flex items-center gap-2 mt-1">
                    <div className="flex-1 bg-gray-200 rounded-full h-2">
                      <div 
                        className="h-2 rounded-full transition-all duration-1000"
                        style={{ 
                          width: `${item.score}%`,
                          backgroundColor: item.color
                        }}
                      ></div>
                    </div>
                    <span className="text-sm font-semibold text-gray-700">{item.score}</span>
                  </div>
                </div>
              </div>
            ))}
          </div>
        </CardContent>
      </Card>

      {/* 成长趋势 */}
      <Card className="border-0 shadow-medium bg-gradient-to-br from-white to-gray-50/50">
        <CardHeader>
          <CardTitle className="flex items-center gap-2">
            <div className="p-2 bg-gradient-ocean rounded-lg">
              <TrendingUp className="w-5 h-5 text-white" />
            </div>
            📈 成长趋势
          </CardTitle>
          <CardDescription>
            追踪你的学习进步轨迹
          </CardDescription>
        </CardHeader>
        <CardContent>
          <div className="h-64 w-full">
            <ResponsiveContainer width="100%" height="100%">
              <BarChart data={growthData} margin={{ top: 20, right: 30, left: 20, bottom: 5 }}>
                <CartesianGrid strokeDasharray="3 3" stroke="#f3f4f6" />
                <XAxis 
                  dataKey="month" 
                  tick={{ fontSize: 12, fill: '#6b7280' }}
                />
                <YAxis 
                  tick={{ fontSize: 12, fill: '#6b7280' }}
                  domain={[60, 100]}
                />
                <Tooltip 
                  contentStyle={{
                    backgroundColor: '#ffffff',
                    border: '1px solid #e5e7eb',
                    borderRadius: '8px',
                    boxShadow: '0 4px 6px -1px rgb(0 0 0 / 0.1)'
                  }}
                />
                <Bar dataKey="score" radius={[4, 4, 0, 0]}>
                  {growthData.map((entry, index) => (
                    <Cell key={`cell-${index}`} fill={`hsl(${220 + index * 30} 70% 60%)`} />
                  ))}
                </Bar>
              </BarChart>
            </ResponsiveContainer>
          </div>
        </CardContent>
      </Card>

      {/* 优势能力 */}
      <Card className="border-0 shadow-medium bg-gradient-to-br from-vibrant-green/5 to-vibrant-blue/5">
        <CardHeader>
          <CardTitle className="flex items-center gap-2">
            <div className="p-2 bg-gradient-sunset rounded-lg">
              <Crown className="w-5 h-5 text-white" />
            </div>
            👑 我的优势
          </CardTitle>
          <CardDescription>
            发现并发挥你的核心竞争力
          </CardDescription>
        </CardHeader>
        <CardContent>
          <div className="space-y-4">
            {strengthsData.map((strength, index) => (
              <div key={index} className="p-4 rounded-xl bg-white/70 border border-gray-100 hover-lift transition-all duration-300">
                <div className="flex items-start gap-4">
                  <div className="text-2xl animate-bounce-soft">{strength.emoji}</div>
                  <div className="flex-1">
                    <div className="flex items-center gap-3 mb-2">
                      <h3 className="font-semibold text-gray-900">{strength.name}</h3>
                      <Badge className={`${strength.color}/10 ${strength.textColor} text-xs`}>
                        {strength.level}
                      </Badge>
                      <div className="flex items-center gap-1">
                        <Star className={`w-4 h-4 ${strength.textColor} fill-current`} />
                        <span className={`font-bold ${strength.textColor}`}>{strength.score}</span>
                      </div>
                    </div>
                    <p className="text-sm text-gray-600">{strength.description}</p>
                    <div className="mt-3">
                      <Progress value={strength.score} className="h-2" />
                    </div>
                  </div>
                </div>
              </div>
            ))}
          </div>
        </CardContent>
      </Card>

      {/* 个性化建议 */}
      <Card className="border-0 shadow-rainbow bg-gradient-to-br from-vibrant-purple/5 to-vibrant-pink/5">
        <CardHeader>
          <CardTitle className="flex items-center gap-2">
            <div className="p-2 bg-gradient-rainbow rounded-lg">
              <Sparkles className="w-5 h-5 text-white" />
            </div>
            ✨ AI 个性化建议
          </CardTitle>
          <CardDescription>
            基于你的能力特点，为你量身定制的提升建议
          </CardDescription>
        </CardHeader>
        <CardContent>
          <div className="space-y-4">
            {recommendations.map((rec, index) => (
              <div key={index} className={`p-4 rounded-xl border ${rec.color} hover-lift transition-all duration-300`}>
                <div className="flex items-start justify-between gap-4">
                  <div className="flex-1">
                    <h3 className="font-semibold mb-2">{rec.title}</h3>
                    <p className="text-sm opacity-80">{rec.description}</p>
                  </div>
                  <Badge variant="outline" className="text-xs">
                    {rec.priority}优先级
                  </Badge>
                </div>
              </div>
            ))}
          </div>
          

        </CardContent>
      </Card>
    </div>
  )
} 